<template>
    <!-- 个人中心 -->
    <div class="personalContainer">
        <div class="personalTop">
            <img v-if="userName" src="@/assets/images/headpic.jpg" alt="">
            <img v-else src="@/assets/images/headP.jpg" alt="">
            <div class="user">
                <p class="name">{{userName}}</p>
                <p class="address">中国</p>
            </div>
            <div class="classify">
                <ul>
                    <li 
                        v-for="item in tabber"
                        :key="item.id"
                        :class="{'active':id == item.id}" 
                        @click="changeTabber(item.id)"
                    >{{item.name}}</li>
                </ul>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "PersonalCenter",
        data(){
            return {
                tabber:[                //tabber
                    {
                        id:1,
                        name:'首页'
                    },
                    {
                        id:2,
                        name:'评价'
                    },
                    {
                        id:3,
                        name:'收藏'
                    },
                    {
                        id:4,
                        name:'签到'
                    },
                    {
                        id:5,
                        name:'图片'
                    },
                    {
                        id:6,
                        name:'攻略'
                    },
                    {
                        id:7,
                        name:'帖子'
                    },
                ],              
                id:1,                   //tabber 切换并高亮
            }
        },

        methods:{
            //tabber 切换
            changeTabber(id){
                if(id == 1){
                    //切换至首页
                    this.id = id
                    this.$router.push('/personalCenter/trem')
                }else if(id == 2){
                    //切换至评价
                    this.id = id
                    this.$router.push('/personalCenter/appraise')
                }else if(id == 3){
                    //切换至收藏
                    this.id = id
                    this.$router.push('/personalCenter/collect')
                }else if(id == 4){
                    //切换至签到
                    this.id = id
                    this.$router.push('/personalCenter/signIn')
                }else if(id == 5){
                    //切换至图片
                    this.id = id
                    this.$router.push('/personalCenter/picture')
                }else if(id == 6){
                    //切换至攻略
                    this.id = id
                    this.$router.push('/personalCenter/strategy')
                }else if(id == 7){
                    //切换至帖子
                    this.id = id
                    this.$router.push('/personalCenter/invitation')
                }
            }
        },

        computed:{
            //用户名
            userName(){
                return this.$route.params.isLogin || JSON.parse(localStorage.getItem('isLogin'))
            }
        },

        //挂载前给 body 添加一个类名
        mounted(){
            document.querySelector('body').className = 'personalOverall'
        },
        //卸载前将 body 的类名删除
        beforeDestroy(){
            document.body.removeAttribute('class','personalOverall')
        }
    };
</script>

<style lang="css" scoped>
/* 个人中心样式 */
.personalContainer{
    width: 960px;
    margin: 80px auto 0;
}
.personalContainer .personalTop{
    width:100%;
    height:130px;
    padding:10px;
    background-image: linear-gradient(to right,rgba(255,255,255,1) 500px,rgba(255,255,255,0));
}
.personalContainer .personalTop img{
    width: 130px;
    border-radius: 50%;
    float: left;
}
.personalContainer .personalTop .user{
    float: left;
    padding:10px 0 0 30px
}
.personalContainer .personalTop .user .name{
    font-size: 24px;
    color: #565858;
}
.personalContainer .personalTop .user .address{
    color: #ABABAB;
    padding-left: 10px;
    line-height:50px;
}
.personalContainer .personalTop .classify{
    width: 820px;
    background-color: #fff;
    float: left;
    margin: -48px 0 0 150px;
    padding: 9px 0px;
}
.personalContainer .personalTop .classify ul{
    display: flex;
    justify-content: space-evenly;
}
.personalContainer .personalTop .classify ul li{
    width: 111px;
    height: 37px;
    background-color: #FDFBEF;
    border: 1px solid #FFDDB0;
    border-radius: 5px;
    color: #FE9A5D;
    font-size: 14px;
    line-height: 37px;
    text-align: center;
}
.personalContainer .personalTop .classify ul .active{
    background-color: #FF8400;
    color: #fff;
}
.personalContainer .personalBottom{
    width:980px;
    height: 500px;
    margin-top: 20px;
}
.personalContainer .personalBottom .contentLeft{
    width: 240px;
    height:100%;
    background-color: #fff;
    float: left;
    margin-right: 10px;
}
.personalContainer .personalBottom .contentLeft .person{
    width:100%;
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px dashed #D5F1FC;
}
.personalContainer .personalBottom .contentLeft .person ul{
    display: flex;
    justify-content:space-evenly
}
.personalContainer .personalBottom .contentLeft .person ul .middle{
    border-left: 1px dashed #EAEAEA;
    border-right: 1px dashed #EAEAEA;
    margin-bottom: 20px;
}
.personalContainer .personalBottom .contentLeft .person ul li{
    padding: 0 25px;
    text-align: center;
    line-height:20px;
}
.personalContainer .personalBottom .contentLeft .person .registerTime{
    line-height: 50px;
    border-top: 1px dashed #D5F1FC;
    width: 80%;
    margin-left: 25px;
}
.personalContainer .personalBottom .contentRight{
    width: 710px;
    height:100%;
    background-color: #fff;
    float: right;
}
.personalContainer .personalBottom .contentRight div{
    padding: 30px 20px;
    border-bottom: 1px dashed #D5F1FC;
}
.personalContainer .personalBottom .contentRight div h3{
    font-size: 18px;
    float: left;
    margin-left: 20px;
}
.personalContainer .personalBottom .contentRight div p{
    float: left;
    margin:4px 0 0 30px;
    height: 10px;
}
.personalContainer .personalBottom .contentRight div button{
    padding: 0 5px;
    float: right;
    margin-right: 10px;
}
</style>